<template>
  <div>
    <el-row>
      <el-col :span="8" style="border-right:1px solid #ccc;">
        <el-form inline size="mini">
          <el-form-item label="申请人">
            <el-input v-model="username" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button-group>
              <el-button type="primary" @click="query">搜索</el-button>
              <el-button type="success" @click="openadd">新增</el-button>
            </el-button-group>
          </el-form-item>
        </el-form>
        <Ca-rule-table
          style="width:80%;"
          :DataList="noticeList"
          :header="header"
          :headle="headle"
          @delete="delitem"
        ></Ca-rule-table>
        <paging
          :currentpage="currentpage"
          :currentlimit="currentlimit"
          :total="total"
          @setpage="getpage"
          @setlimit="getlimit"
        ></paging>
      </el-col>
      <el-col :span="14">
        <div style="margin-left:7%;width:100%;">
          <el-divider content-position="left" style="font-size:24px;"
            >发起公告</el-divider
          >
          <vue-ueditor-wrap
            v-model="msg"
            :config="myConfig"
            style="width:90%;"
          ></vue-ueditor-wrap>
          <el-checkbox
            style="margin-top:10px;"
            :indeterminate="isIndeterminate"
            v-model="checkAll"
            @change="handleCheckAllChange"
            >全选</el-checkbox
          >
          <div style="margin: 10px 0;"></div>
          <el-checkbox-group
            v-model="checkedCompany"
            @change="handleCheckedCompanyChange"
          >
            <el-checkbox
              v-for="(item, index) in companylist"
              :label="item.company_id"
              :key="index"
              >{{ item.company_name }}</el-checkbox
            >
          </el-checkbox-group>
          <el-button
            type="primary"
            @click="submit"
            style="float:right;margin-top:10px;"
            >提交</el-button
          >
        </div>
      </el-col>
    </el-row>
    <el-dialog :visible.sync="isopen" style="z-index: 3;" v-dialogDrag>
      <add-notice v-if="isopen"></add-notice>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import QS from "qs";
import VueUeditorWrap from "vue-ueditor-wrap";
import addNotice from "./components/add-notice";
import {
  apinoticeLists,
  apideleteNotice,
  apiadd_Notice
} from "@/request/api.js";
export default {
  name: "noticeRecord",
  data() {
    return {
      total: 0,
      checkedCompany: [],
      checkAll: false,
      isIndeterminate: true,
      msg:
        "<p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p>",
      myConfig: {
        UEDITOR_HOME_URL: "/static/UEditor/"
        // serverUrl: "http://localhost:8089/ueditor/ue"
      },
      currentlimit: 15,
      currentpage: 1,
      username: "",
      noticeList: [],
      isopen: false,
      header: [
        ["起草人姓名", "username"],
        ["创建时间", "start_time"],
        ["状态", "status"]
      ],
      headle: ["", "删除"],
      companylist: JSON.parse(sessionStorage.getItem("companyList")),
      contract_text: ""
    };
  },
  components: {
    addNotice,
    VueUeditorWrap
  },
  mounted() {
    this.getNoticeList();
  },
  methods: {
    query() {
      this.currentlimit = 15;
      this.currentpage = 1;
      this.getNoticeList();
    },
    //全选事件处理
    handleCheckAllChange(val) {
      this.checkedCompany = val ? this.companylist.map(item => item[0]) : [];
      this.isIndeterminate = false;
    },
    //多选事件处理
    handleCheckedCompanyChange(val) {
      //当传入的数量等于所有公司的数量，即为全选，选择按钮为true
      let checkedCount = val.length;
      this.checkAll = checkedCount === this.companylist.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.companylist.length;
    },
    //提交公告
    submit() {
      this.$confirm(`确定要发起公告吗？`)
        .then(() => {
          let data = {
            delIds: JSON.stringify(this.checkedCompany),
            notice_content: this.msg,
            userid: "1054"
          };
          console.log(this.msg);
          apiadd_Notice(data).then(() => {
            this.$message.success("提交成功!");
            this.getNoticeList();
          });
        })
        .catch();
    },
    //删除
    delitem(row) {
      this.$confirm(
        `确定要删除<span style="color:red;">“${
          row.username
        }”</span>起草的这条公告吗？`,
        {
          dangerouslyUseHTMLString: true
        }
      )
        .then(() => {
          apideleteNotice({ bizId: row.notice_id }).then(res => {
            this.$message.success(res.msg);
            this.getNoticeList();
          });
        })
        .catch(() => {});
    },
    getpage(val) {
      this.currentpage = val;
      this.getNoticeList();
    },
    getlimit(val) {
      this.currentlimit = val;
      this.getNoticeList();
    },
    openadd() {
      this.isopen = true;
    },
    getNoticeList() {
      let data = {
        page: this.currentpage,
        limit: this.currentlimit,
        username: this.username
      };
      apinoticeLists(data).then(res => {
        this.total = res.total;
        this.noticeList = res.data.map(item => {
          item.status =
            item.status == 1
              ? "审核中"
              : item.status == 3
              ? "已发文"
              : "审核不通过";
          return item;
        });
      });
    }
  }
};
</script>

<style lang="scss"></style>
